<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>系统公告</title>
        <link rel="stylesheet" href="css/layui.css" media="all">
        <link rel="stylesheet" href="css/doc.css" media="all">
        <link href="css/bootstrap.min.css" rel="stylesheet">

    </head>

    <body>
        <div class="kit-doc">
            <blockquote class="layui-elem-quote">系统公告</blockquote>
            <table class="layui-table">
                <colgroup>
                    <col width="100">
                    <col width="100">
                    <col width="200">
                    <col width="150">
                    <col width="200">
                </colgroup>
                <thead>
                <tr>
                    <th>id</th>
                    <th>公告时间</th>
                    <th>公告内容</th>
                    <th>公告日期</th>
                    <th>公告操作</th>
                </tr>
                </thead>
                <tbody>
                <#if !notices.records[0]??>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">添加</button>
                </#if>
                <#list notices.records as notice>
                    <tr>
                        <td>${notice.id}</td>
                        <td>${notice.time}</td>
                        <td>${notice.content}</td>
                        <td>${notice.date}</td>
                        <td>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add">添加
                            </button>
                            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#update"
                                    onclick="update(${notice.id})">修改
                            </button>
                            <button class="btn btn-danger deleteNotice">删除</button>
                        </td>
                    </tr>
                </#list>
                </tbody>
            </table>
        </div>
        <div id="demo" style="margin-left: 470px;"></div>
        <!-- 添加公告  -->
        <div class="modal fade" id="add" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="post" action="/addNotice">
                        <input type="hidden" name="pageNum" value="${notices.current}"><#--当前第几页-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span
                                        aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="exampleModalLabel">添加公告</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">公告时间:</label>
                                <input type="date" name="time" class="form-control" id="recipient-name" required>
                            </div>
                            <div class="form-group">
                                <label for="recipient-pass" class="control-label">公告内容:</label>
                                <input type="text" name="content" class="form-control" id="recipient-pass" required>
                            </div>
                            <div class="form-group">
                                <label for="recipient-pass" class="control-label">公告日期:</label>
                                <input type="date" name="date" class="form-control" id="recipient-pass" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <input type="submit" class="btn btn-primary" value="添加"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 修改公告  -->
        <div class="modal fade" id="update" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="post" action="/updateNotice">
                        <input type="hidden" name="pageNum" value="${notices.current}"><#--当前第几页-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span
                                        aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="exampleModalLabel">修改公告</h4>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="id" id="a" class="form-control">
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">公告时间:</label>
                                <input type="date" name="time" id="time" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="recipient-pass" class="control-label">公告内容:</label>
                                <input type="text" name="content" id="content" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="recipient-pass" class="control-label">公告日期:</label>
                                <input type="date" name="date" id="date" class="form-control">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <input type="submit" class="btn btn-primary" value="修改"/>
                        </div>
                </div>
            </div>
            </form>
        </div>
        <script src="js/jquery-3.5.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/layui.all.js"></script>
        <script>
            //获取项目路径
            function URL() {
                return window.location.protocol + "//" + window.location.host + "/";
            }

            layui.use(['laypage'], function () {
                var laypage = layui.laypage
                laypage.render({
                    elem: 'demo'
                    , curr: '${notices.current}'    //当前第几页
                    , count: '${notices.total}'     //总记录数
                    , limit: '${notices.size}'      //每页记录数
                    , theme: '#009688'
                    , jump: function (obj, first) {
                        if (!first) {
                            window.location.href = URL() + "noticeManage?pageNum=" + obj.curr;
                        }
                    }
                });
            });
            //删除公告
            $('.deleteNotice').click(function () {
                let id = $(this).parents("tr").find("td").eq(0).text();
                if (window.confirm("确认删除第" + id + "个公告吗？")) {
                    $.ajax({
                        url: URL() + "delNotice?",
                        type: "DELETE",
                        data: "id=" + id,
                        success: function () {
                            window.location.reload();
                        }
                    });
                }
            });

            //修改公告
            function update(e) {
                $.get(
                    "getNotice?id=" + e,
                    function (data) {
                        $("#time").val(data.time);
                        $("#content").val(data.content);
                        $("#date").val(data.date);
                        $("#a").val(data.id);
                    }
                )
            }
        </script>
    </body>
</html>